<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="author" content="演示SHOP Team">
	<meta name="copyright" content="演示SHOP">
	<title>${message("member.profile.edit")} - 演示电商</title>
	<link href="${base}/favicon.ico" rel="icon">
	<link href="${base}/resources/common/css/bootstrap.css" rel="stylesheet">
	<link href="${base}/resources/common/css/font-awesome.css" rel="stylesheet">
	<link href="${base}/resources/common/css/iconfont.css" rel="stylesheet">
	<link href="${base}/resources/common/css/awesome-bootstrap-checkbox.css" rel="stylesheet">
	<link href="${base}/resources/common/css/bootstrap-datetimepicker.css" rel="stylesheet">
	<link href="${base}/resources/common/css/base.css" rel="stylesheet">
	<link href="${base}/resources/shop/css/base.css" rel="stylesheet">
	<link href="${base}/resources/member/css/base.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="${base}/resources/common/js/html5shiv.js"></script>
		<script src="${base}/resources/common/js/respond.js"></script>
	<![endif]-->
	<script src="${base}/resources/common/js/jquery.js"></script>
	<script src="${base}/resources/common/js/bootstrap.js"></script>
	<script src="${base}/resources/common/js/bootstrap-growl.js"></script>
	<script src="${base}/resources/common/js/moment.js"></script>
	<script src="${base}/resources/common/js/bootstrap-datetimepicker.js"></script>
	<script src="${base}/resources/common/js/jquery.lSelect.js"></script>
	<script src="${base}/resources/common/js/jquery.validate.js"></script>
	<script src="${base}/resources/common/js/jquery.validate.additional.js"></script>
	<script src="${base}/resources/common/js/jquery.form.js"></script>
	<script src="${base}/resources/common/js/jquery.cookie.js"></script>
	<script src="${base}/resources/common/js/underscore.js"></script>
	<script src="${base}/resources/common/js/url.js"></script>
	<script src="${base}/resources/common/js/velocity.js"></script>
	<script src="${base}/resources/common/js/velocity.ui.js"></script>
	<script src="${base}/resources/common/js/base.js"></script>
	<script src="${base}/resources/member/js/base.js"></script>
	[#noautoesc]
		[#escape x as x?js_string]
			<script>
				$().ready(function() {
					var IntervalCount = 120;//验证码有效时间
					var $profileForm = $("#profileForm");
					var $getSmsCode = $("[data-action='getSmsCode']");
					var countdownInterval;
					var count=IntervalCount;
					$getSmsCode.click(function() {
						count=IntervalCount;
						$getSmsCode.attr("disabled", true);
						var vipCard=$("#vipCard").val();
						if(vipCard===null||vipCard===''){
							$getSmsCode.attr("disabled", false);
							return false;
						}
						$.ajax({
							url: "${base}/member/profile/getSmsCode?vipCard="+vipCard,
							type: "GET",
							dataType: "json",
							cache: false,
							success: function(data) {
								countdownInterval = setInterval(CountDown, 1000);
								localStorage.setItem("vipCard",vipCard);
							}
						});


					});
					var countdowns=localStorage.countdown;
					if(countdowns>0){
						var vipCard=localStorage.vipCard;
						$("#vipCard").val(vipCard);
						count=countdowns;
						countdownInterval = setInterval(CountDown, 1000);
					}
					function CountDown() {
						$getSmsCode.attr("disabled", true);
						$getSmsCode.text(" "+count+"s ");
						localStorage.setItem("countdown",count);
						if (count == 0) {
							clearInterval(countdownInterval);
							$getSmsCode.text('${message("member.login.getCaptcha")}')
							$getSmsCode.removeAttr("disabled");
							localStorage.removeItem("countdown");
							localStorage.removeItem("vipCard");
						}else{
							count--;
						}
					}
					// 表单验证
					$profileForm.validate({
						rules: {
							vipCard: {
								required: true
							},
							smsCode: {
								required: true
							}

						},

						submitHandler: function(form) {
							$(form).ajaxSubmit({
								successMessage: false,
								successRedirectUrl: function(redirectUrlParameterName) {
									localStorage.removeItem("countdown");
									clearInterval(countdownInterval);
									return  "${base}/member/profile/edit";
								}
							});
							[#--$(form).ajaxSubmit({--]
							[#--	successRedirectUrl: "${base}/member/profile/edit"--]
							[#--});--]
						}
					});

				});
			</script>
		[/#escape]
	[/#noautoesc]
</head>
<body class="member">
[#include "/shop/include/main_header.ftl" /]
<main>
	<div class="container">
		<div class="row">
			<div class="col-xs-2">
				[#include "/member/include/main_menu.ftl" /]
			</div>
			<div class="col-xs-10">
				<form id="profileForm" class="ajax-form form-horizontal" action="${base}/member/profile/bindingCard" method="post">
					<div class="panel panel-default">
						<div class="panel-heading">${message("member.profile.binding")}</div>
						<div class="panel-body">
							<div class="form-group">
								<label class="col-xs-3 col-sm-2 control-label">${message("Member.username")}:</label>
								<div class="col-xs-9 col-sm-4">
									<p class="form-control-static" >${currentUser.username}</p>
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-3 col-sm-2 control-label" for="email">${message("common.captcha.vipCard")}:</label>
								<div class="col-xs-9 col-sm-4" >
									<input id="vipCard" name="vipCard" placeholder="${message("member.profile.vipCardTitle")}" class="form-control" type="text" value="${currentUser.attributeValue0}" maxlength="200">
								</div>
								<div class="col-xs-9 col-sm-4" >
									<button  class="btn btn-primary" type="button" style="width:86px" data-action="getSmsCode">${message("member.login.getCaptcha")}</button>
								</div>

							</div>
							<div class="form-group">
								<label class="col-xs-3 col-sm-2 control-label" for="mobile">${message("common.captcha.name")}:</label>
								<div class="col-xs-9 col-sm-4">
									<input  id="smsCode" name="smsCode" placeholder="${message("member.login.captchaRequired")}" class="form-control" type="text" value="" maxlength="6">
								</div>
							</div>

						</div>
						<div class="panel-footer">
							<div class="row">
								<div class="col-xs-9 col-sm-10 col-xs-offset-3 col-sm-offset-2">
									<button  class="btn btn-primary" type="submit">${message("common.bindingVip")}</button>

								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</main>
[#include "/shop/include/main_footer.ftl" /]
</body>
</html>